<template>
  <!-- 添加或修改分类对话框 -->
  <el-dialog :title="title" :visible.sync="showDialog" class="common-dialog" width="700px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" maxlength="200" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属店铺" prop="storeId">
            <el-select
              v-model="form.storeId"
              style="width: 260px"
              placeholder="所属店铺，空则为公共所有"
            >
              <el-option :key="0" label="公共所有" v-if="!this.$store.getters.storeId" :value="0"/>
              <el-option v-for="storeInfo in storeList" :key="storeInfo.id" :label="storeInfo.name" :value="storeInfo.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="链接" prop="url">
            <el-input v-model="form.url" placeholder="请输入链接，如：pages/user/index" maxlength="200"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="图片" prop="image">
            <el-upload
              :action="uploadAction"
              list-type="picture-card"
              :class="{hide:hideUpload}"
              :file-list="uploadFiles"
              :auto-upload="true"
              :show-file-list="false"
              :headers="uploadHeader"
              :on-success="handleUploadSuccess">
              <img
                v-if="this.form.image"
                :src="imagePath + this.form.image"
                class="list-img"
              />
              <i v-if="!this.form.image" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <p class="form-tips">（提示：点击图片修改，建议尺寸：640 x 350）</p>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入排序数字，越小越靠前" maxlength="10"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注信息">
            <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio key="A" label="A" value="A">启用</el-radio>
              <el-radio key="N" label="N" value="N">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSubmit">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { saveBookCate } from "@/api/book";
import { getToken } from '@/utils/auth';
export default {
  name: "bookCateForm",
  props: {
    showDialog: {
      type:[Boolean],
      default:()=>false
    },
  },
  watch: {
    showDialog(value) {
      if (value) {

      }
    }
  },
  data(){
    return {
      loading: false,
      total: 0,
      title: '新增预约分类',
      form: {},
      storeList: [],
      // 上传地址
      uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
      // 隐藏上传
      hideUpload: false,
      // 上传文件列表
      uploadFiles: [],
      uploadHeader: { 'Access-Token' : getToken() },
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" },
          { min: 2, max: 200, message: '标题长度必须介于2 和 200 之间', trigger: 'blur' }
        ],
        image: [{ required: true, message: "请上传图片", trigger: "blur" }]
      }
    }
  },
  methods: {
    // 提交
    doSubmit(hangNo) {
      const app = this;
      if (!app.cartList || app.cartList.length < 1) {
        app.$modal.alert("请先添加结算商品！");
        return false;
      }
      let cartIds = [];
      app.cartList.forEach(function(cart) {
        cartIds.push(cart.cartId);
      })
      const param = { hangNo: hangNo, userId: app.memberInfo ? app.memberInfo : '', cartIds: cartIds.join(',') };
      saveBookCate(param).then( response => {
        if (response) {
          app.$modal.msgSuccess("挂单成功！");
          app.getCateList();
        }
      })
    },
    // 取消
    cancel() {
      this.open = false;
    },
    handleUploadSuccess(file) {
      this.form.image = file.data.fileName
    }
  }
}
</script>


